<template>
  <div>
    <el-dialog
      title="调整费用"
      :visible.sync="dialogShow"
      width="720px"
      height="352px"
      @close="closeDialog"
      center
      custom-class="dialogNoPadding dialogFontGray"
    >
      <div class="changePrice_box">
        <el-form>
          <ul class="li_fl FCC">
            <li class="F li_fl_l">
              <span class="lable_color">买家:</span>
              <span>{{orderInfo.buyerNick}}</span>
            </li>
            <li class="F li_fl_r">
              <span class="lable_color">订单号:</span>
              <span>{{orderInfo.orderId}}</span>
            </li>
          </ul>
          <ul>
            <li class="orderList_item FCC" v-for="(item, index) in orderList" :key="index">
              <div class="radio_box FCC cursor" @click="radioChange(item)">
                <div class="radio_box_radio FCC">
                  <div v-show="item.isEdit" class="radio_box_radioSel"></div>
                </div>
              </div>
              <div class="change_goods overflowEllipsis">{{ item.title }}</div>
              <div class="change_price FCC">
                <div v-show="!item.isInput" class="color_bsae">{{item.price}}</div>
                <div v-show="item.isInput">
                  <el-form-item>
                    <el-input class="w_108" minlength="1" maxlength="8" v-model="item.price"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="change_but">
                <el-button
                  v-show="item.isEdit"
                  class="baseTextBut"
                  :class="{'color_fad':item.isEdit && !item.isInput,'baseTextFADBut':item.isEdit && !item.isInput,'color_bsae':item.isEdit && item.isInput}"
                  @click="editClick(item)"
                  type="text"
                >{{!item.isInput ? '修改价格' : '确认修改'}}</el-button>
              </div>
            </li>
          </ul>
        </el-form>
        <div class="changePrice_box_orice FAIC">
          <div class="lable_color">总价：</div>
          <div class="color_bsae">¥{{total}}</div>
        </div>
        <div class="changePrice_box_but F">
          <el-button class="baseBut W_108 bg_base" @click="submitDialog">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderItemUpdatePrice } from "../../../../../requestApi/order/allOrder";
export default {
  props: ["showTrue", "orderData"],
  data() {
    return {
      dialogShow: false,
      orderList: [],
      total: 0,
      orderInfo: {
        buyerNick: "",
        orderId: ""
      }
    };
  },
  filters: {},
  watch: {
    showTrue(val) {
      let self = this;
      self.dialogShow = val;
      if (self.dialogShow) {
        self.$nextTick(() => {
          self.dataBackfillFun();
        });
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    /* 数据回填  start */
    dataBackfillFun() {
      this.orderInfo = {
        buyerNick: this.orderData ? this.orderData.buyerNick || "" : "",
        orderId: this.orderData ? this.orderData.orderId || "" : ""
      };
      if (this.orderData.orderItemList && this.orderData.orderItemList.length) {
        this.orderList = this.orderData.orderItemList.map(e => {
          return {
            ...e,
            isInput: false,
            isEdit: false
          };
        });
      }

      this.TotalFun();
    },
    /* 数据回填  end */
    /* 总价计算  start */
    TotalFun() {
      let Prices = this.orderList.map(e => {
        return e.price;
      });
      this.total = this.baseTotalFee(Prices);
    },
    /* 总价计算  end */
    /* 修改价格  start */
    radioChange(item) {
      this.orderList.forEach(e => {
        e.isEdit = false;
        e.isInput = false;
      });
      item.isEdit = true;
    },
    editClick(item) {
      if (item.isInput) {
        // 修改
        if (item.price) {
          item.isInput = !item.isInput;
          this.orderList.forEach(e => {
            if (e.orderId != item.orderId) {
              e.isInput = false;
            }
          });
          this.TotalFun();
        } else {
          this.$message({
            type: "error",
            message: "请输入价格！"
          });
        }
      } else {
        item.isInput = !item.isInput;
        this.orderList.forEach(e => {
          if (e.orderId != item.orderId) {
            e.isInput = false;
          }
        });
      }
    },
    /* 修改价格  end */
    closeDialog() {
      this.$emit("close");
    },
    /* 提交  start */
    submitDialog() {
      this.orderItemUpdatePriceFun();
    },
    async orderItemUpdatePriceFun() {
      let self = this;
      let orderList = this.orderList.map(e => {
        return {
          id: e.id,
          price: e.price
        };
      });
      let params = {
        orderList: orderList,
        grade: sessionStorage.getItem("grade")
      };
      let res = await orderItemUpdatePrice(params);
      console.log("res", res);

      if (res.status == 200) {
        this.$emit("submit");
        this.$message({
          type: "error",
          message: "成功！"
        });
      } else {
        this.baseMessage();
      }
    }
    /* 提交  end */
  }
};
</script>

<style scoped rel="stylesheet">
.changePrice_box_but {
  height: 72px;
  width: 100%;
  justify-content: center;
}
.changePrice_box {
  padding: 20px 20px 0px 20px;
}
.change_but {
  width: 56px;
}
.changePrice_box_orice {
  height: 87px;
  width: 80%;
  padding-left: 145px;
}

.price_color {
  color: rgba(255, 94, 41, 1) !important;
}

.lable_color {
  color: rgba(152, 159, 173, 1);
  padding-right: 5px;
}
.li_fl {
  display: flex;
  margin-bottom: 14px;
}
.li_fl_l {
  margin-right: 30px;
}
.li_fl_r {
  margin-left: 30px;
}
.orderList_item {
  margin-bottom: 7px;
  height: 32px;
}
.radio_box {
  width: 24px !important;
  height: 32px;
}
.radio_box_radio {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(152, 159, 173, 1);
  border-radius: 50%;
}
.radio_box_radioSel {
  width: 6px;
  height: 6px;
  background: rgba(235, 68, 38, 1);
  border-radius: 50%;
}
.change_goods {
  min-width: 182px;
  line-height: 32px;
  height: 32px;
  max-width: 400px;
}
.change_price {
  width: 148px;
  height: 32px;
}
.change_price .el-form-item {
  margin: 0 !important;
  padding: 0 !important;
}
</style>
